import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
// 重点是 sonKey 变量，这个是为了父类调用子类使用的，因为我们在滑动名称列表的时候也需要改变指示器的位置，这个时候就需要反向改变指示器的位置
GlobalKey<_IndexBarState> sonKey = GlobalKey();

class IndexBar extends StatefulWidget {
  //创建索引条回调
  final void Function(String str) indexBarCallBack;
  double top = 100;
  //重写构造方法
  IndexBar({required Key key,required this.indexBarCallBack,required this.top}) : super(key: key);
  @override
  _IndexBarState createState() => _IndexBarState();
}

int getIdex(BuildContext context, Offset globalPosition, List index_word) {
// //  拿到box
  RenderBox box = context.findRenderObject() as RenderBox;
//  拿到y值
  double y = box.globalToLocal(globalPosition).dy;
//  算出字符高度  box 的总高度 / 2 / 字符开头数组个数
  var itemHeight = MediaQuery.of(context).size.height / 2 / index_word.length;
  //算出第几个item，并且给一个取值范围   ~/ y除以item的高度取整  clamp 取值返回 0 -
  int index = (y ~/ itemHeight).clamp(0, index_word.length - 1);
  print('现在选中的是${index_word[index]}');

  return index;
}

final List<String> _index_word = [];

class _IndexBarState extends State<IndexBar> {
  Color _bkColor = Colors.white;
  double _indicatorY = 0.0; //悬浮窗位置
  String _indicatorText = 'A'; //显示的字母
  bool _indocatorHidden = true; //是否隐藏悬浮窗
  int indexSelect = 0;
//  排序后的数组
//   final List<Friends> _listDatas = [];

  // 名称列表在滑动到某些位置是，会将指示器的位置也返回过来，然后刷新指示器选择位置
  void setIndexSelect(int index) {
    setState(() {
      indexSelect = index;
    });
  }

  void initState() {
    super.initState();
//----------------------- 1 -------------------------------
//    1、根据实际数据显示右侧bar
//     _listDatas.clear();
//     _index_word.clear();
//     _listDatas.addAll(datas);
//     //排序!
//     _listDatas.sort((Friends a, Friends b) {
//       return a.indexLetter.compareTo(b.indexLetter);
//     });
//     //经过循环，将每一个头的首字母放入index_word数组
//     for (int i = 0; i < _listDatas.length; i++) {
//       if (i < 1 || _listDatas[i].indexLetter != _listDatas[i - 1].indexLetter) {
//         _index_word.add(_listDatas[i].indexLetter);
//       }
//     }
    //----------------------- 2 -------------------------------
    _index_word.clear();
    // 2、右侧bar显示全部字母
    _index_word.addAll(INDEX_WORDS);
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> words = [];
    for (int i = 0; i < _index_word.length; i++) {
      words.add(
        Expanded(
          child: Container(
            alignment: Alignment.center,
            // 设置指示器字母的大小和样式
            child: Container(
              height: 20,
              width: 20,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                // 选择哪个字母，改变其颜色和背景色，同时刷洗其他为选择的字母样式
                color: indexSelect == i ? Color(0xFFFF0000) : Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                _index_word[i],
                style: TextStyle(fontSize: 12, color: indexSelect == i ? Colors.white: Color(0xFF666666)),
              ),
            ),
          ),
        ),
      );
    }

    return Positioned(
      right: 14.0,// 设置指示器的距顶高度高度、宽度等
      height: MediaQuery.of(context).size.height / 2,
      top:widget.top,
      child: Row(
        children: <Widget>[
          // Container(
          //   alignment: Alignment(0, _indicatorY),
          //   width: 15,
          //   child: _indocatorHidden // 这里是设置气泡提示的，当滑动的时候会在屏幕中央位置有一个更大的字母提示
          //       ? null
          //       : Stack(
          //     alignment:
          //     Alignment(-0.2, 0), //0, 0 是中心  顶部是 0，-1  左边中心是-1，0
          //     children: <Widget>[
          //       Text(
          //         _indicatorText,
          //         style: TextStyle(
          //             fontSize: 11,
          //             color: Colors.red),
          //       ),
          //     ],
          //   ), //气泡
          // ),
          GestureDetector(
            child: Container(
              width: 20,

              decoration: BoxDecoration(
                color:_bkColor,
                borderRadius: BorderRadius.circular(2.r),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withAlpha(25),
                      offset: const Offset(0, 14),
                      blurRadius: 24,
                      spreadRadius: 0,						// 在应用模糊之前，框应该膨胀的量。
                    ),
                  ],
              ),
              child: Column(
                children: words,
              ),
            ),
            // 当开始滑动指示器的时候，根据坐标计算出滑动到数组_index_word哪个字母位置，并将字母返回到名称页面
            onVerticalDragUpdate: (DragUpdateDetails details) {
              int index = getIdex(context, details.globalPosition, _index_word);
              indexSelect = index;
              setState(() {
                _indicatorText = _index_word[index];
                //根据我们索引条的Alignment的Y值进行运算的。从 -1.1 到 1.1
                //整个的Y包含的值是2.2
                _indicatorY = 2.2 / _index_word.length * index - 1.1;
                _indocatorHidden = false;
              });
              widget.indexBarCallBack(_index_word[index]);
            }, //按住屏幕移动手指实时更新触摸的位置坐标
            // 当开始点击指示器字母的时候出发，和滑动差不多
            onVerticalDragDown: (DragDownDetails details) {
              //globalPosition 自身坐标系
              int index = getIdex(context, details.globalPosition, _index_word);
              _indicatorText = _index_word[index];

              _indicatorY = 2.2 / _index_word.length * index - 1.1;
              _indocatorHidden = true;
              widget.indexBarCallBack(_index_word[index]);
              print('现在点击的位置是${details.globalPosition}');
              print('现在点击的位置是${indexSelect}');
              indexSelect = index;
              setState(() {
                _bkColor = Colors.white;
              });
            }, //触摸开始
            // 当松开指示器的时候，指示器回复原样
            onVerticalDragEnd: (DragEndDetails details) {
              setState(() {
                _indocatorHidden = true;
                _bkColor = Colors.white;
              }); //触摸结束
            },
          ) //这个是索引条
        ],
      ),
    );
  }
}

// 所有的字母
const INDEX_WORDS = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
];